<lv-group lvGutter="0.08rem" class="lv-transfer-content">
  <ng-container *ngIf="lvMode === transferModeTypeEnum.DEFAULT">
    <!--源-->
    <ng-container
      *ngTemplateOutlet="
        transferTpl;
        context: {
          config: {
            belong: 'source',
            data: sourceData,
            async: lvAsync,
            cols: lvSourceColumns,
            selection: lvSourceSelection,
            total: lvTotal,
            showTotal: lvShowTotal,
            title: titles && titles[0],
            header: lvHeaders && lvHeaders[0],
            render: lvRenders && lvRenders[0],
            footer: lvFooters && lvFooters[0],
            operate: lvOperateTemplate && lvOperateTemplate[0],
            colDisplayChange: lvSourceColDisplayChange
          }
        }
      "
    ></ng-container>

    <!--  TODO：当前交互废弃  -->
    <div class="lv-transfer-operation" *ngIf="lvShowOperation">
      <lv-group lvDirection="vertical" lvGutter="0.08rem">
        <button
          lv-button
          [lv-tooltip]="lvTransferMode === 'cut' ? '剪切到左侧' : '复制到左侧'"
          [lvTooltipTheme]="'light'"
          [lvTooltipPosition]="'top'"
          lvTooltipTrigger="customize"
          [(lvTooltipVisible)]="prevVisible"
          (click)="moveToSource()"
          (mouseenter)="prevVisible = true"
          (mouseleave)="prevVisible = false"
          [disabled]="!toSourceActive"
        >
          <i lv-icon="lv-icon-arrow-prev"></i>
        </button>
        <button
          lv-button
          [lv-tooltip]="lvTransferMode === 'cut' ? '剪切到右侧' : '复制到右侧'"
          [lvTooltipTheme]="'light'"
          [lvTooltipPosition]="'bottom'"
          lvTooltipTrigger="customize"
          [(lvTooltipVisible)]="nextVisible"
          (click)="moveToTarget()"
          (mouseenter)="nextVisible = true"
          (mouseleave)="nextVisible = false"
          [disabled]="!toTargetActive"
        >
          <i lv-icon="lv-icon-arrow-next"></i>
        </button>
      </lv-group>
    </div>

    <i *ngIf="!lvShowOperation && lvMode === 'default'" lv-icon="lv-icon-arrow-next" class="lv-transfer-arrow-next"></i>

    <!--目标-->
    <ng-container
      *ngTemplateOutlet="
        transferTpl;
        context: {
          config: {
            belong: 'target',
            data: targetData,
            async: false,
            cols: lvTargetColumns,
            selection: lvTargetSelection,
            total: false,
            showTotal: lvShowSelectionTotal,
            title: titles && titles[1],
            header: lvHeaders && lvHeaders[1],
            render: lvRenders && lvRenders[1],
            footer: lvFooters && lvFooters[1],
            operate: lvOperateTemplate && lvOperateTemplate[1],
            colDisplayChange: lvTargetColDisplayChange
          }
        }
      "
    ></ng-container>
  </ng-container>

  <ng-container *ngIf="lvMode === transferModeTypeEnum.SIMPLE">
    <ng-container
      *ngTemplateOutlet="
        transferTpl;
        context: {
          config: {
            belong: simpleBelong,
            data: sourceData,
            async: simpleBelong === 'source' ? lvAsync : false,
            cols: simpleBelong === 'source' ? lvSourceColumns : lvTargetColumns,
            selection: lvSourceSelection,
            total: lvTotal,
            showTotal: [lvShowTotal, lvShowSelectionTotal],
            title: titles,
            header: lvHeaders,
            render: lvRenders,
            footer: lvFooters,
            operate: simpleBelong === 'source' ? lvOperateTemplate?.[0] : lvOperateTemplate?.[1],
            colDisplayChange: simpleBelong === 'source' ? lvSourceColDisplayChange : lvTargetColDisplayChange
          }
        }
      "
    ></ng-container>
  </ng-container>
</lv-group>

<ng-template #transferTpl let-config="config">
  <lv-transfer-panel
    [(lvBelong)]="config.belong"
    [lvMode]="lvMode"
    [lvData]="config.data"
    [lvAsync]="config.async"
    [lvColumns]="config.cols"
    [lvDataKey]="lvDataKey"
    [lvSelection]="config.selection"
    [lvItemSize]="lvItemSize"
    [lvTotal]="config.total"
    [lvShowItemTotal]="config.showTotal"
    [lvShowColControl]="lvColDisplayControl"
    [lvTitle]="config.title"
    [lvHeader]="config.header"
    [lvRender]="config.render"
    [lvFooter]="config.footer"
    [lvSize]="lvSize"
    [lvOperateTemplate]="config.operate"
    (lvSelectionChange)="selectionChange($event, config.belong)"
    (lvStateChange)="stateChange($event, config.belong)"
    (lvRemoveItem)="removeItem($event)"
    (lvBelongChange)="belongChange($event)"
    (colDisplayChange)="config.colDisplayChange.emit($event)"
  ></lv-transfer-panel>
</ng-template>
